<template>
  <div>
    <h1>用户详情</h1>
    <div class="xzlist">
      <label for="name"> 用户姓名: </label>
      <el-input
        id="name"
        v-model="usersName"
        type="btn"
        height="30"
        placeholder="姓名"
      />
      <label for="equipment">
        部门: 
        <el-select
          v-model="departmentId"
          placeholder="请选择用户部门"
        >
          <el-option
            label="全部"
            value=""
          ></el-option>
          <el-option
            label="教务处"
            value="0"
          ></el-option>
          <el-option
            label="运维处"
            value="1"
          ></el-option>
          <el-option
            label="校务处"
            value="2"
          ></el-option> </el-select>
      </label>
      &nbsp;
      <el-button
        type="primary"
        @click="querUser()"
      >
        <i class="el-icon-search"></i> 查询
      </el-button>
      &nbsp;&nbsp;
      <button @click="showdiaform">
        <i class="el-icon-plus"></i>新增用户
      </button>
    </div>
    <el-table
      ref="table"
      :data="tableUsers"
      border
      style="width: 100%"
      :height="tableHeight"
    >
      <el-table-column
        prop="usersId"
        label="序号"
        width="80"
      >
      </el-table-column>
      <el-table-column
        prop="usersAccount"
        label="用户名/账号"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="password"
        label="密码"
      >
      </el-table-column> -->
      <el-table-column
        prop="usersName"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="角色"
      >
        <template slot-scope="scope">
          {{
            scope.row.address == 0
              ? "监考老师"
              : scope.row.address == 1
                ? "培训老师"
                : "监考老师&培训老师"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="usersRole"
        label="权限"
      >
        <template slot-scope="scope">
          {{ scope.row.usersRole == 1 ? "管理员" : "普通用户" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="department"
        label="部门"
      >
        <template slot-scope="scope">
          {{
            scope.row.department == 0
              ? "教务处"
              : scope.row.department == 1
                ? "运维处"
                : "教务二处"
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="online_flag"
        label="状态"
      >
        <template slot-scope="scope">
          {{ scope.row.online_flag == 0 ? "启用" : "锁定" }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="285"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="compileClick(scope.row)"
          >
            <i class="el-icon-document"></i> 编辑
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="changePassword(scope.row)"
          >
            <i class="el-icon-document"></i> 修改密码
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="deleteClick(scope.row)"
          >
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="total>10"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="curpage"
    >
    </el-pagination>
    
    <!-- 添加用户 -->
    <add-user
      ref="dialogform"
      @addlist="listadd"
    >
    </add-user>
  </div>
</template>
<script>
import { queryManageUser, addUsers, updateUsers,deleteUser } from "@/api";
import addUser from "../../components/addUser.vue";
export default {
  components: {
    addUser,
  },
  data() {
    return {
      dialogFormVisible: false,
      tableUsers: [],
      total: 0, // 总条数
      limit: 10,
      tableHeight:200,
      page: 1,
      usersName: "",
      departmentId: "",
      usersPassword:'', // 账号密码
    };
  },
  mounted() {
    this.querUser();
    setTimeout(() => {
      this.tableHeight =
          window.innerHeight - this.$refs.table.$el.offsetTop - 60;
    }, 200);
     
  },
  methods: {
    // 获取所有用户信息
    querUser(
      limit = this.limit,
      page = this.page,
      usersName = this.usersName,
      departmentId = this.departmentId
    ) {
      queryManageUser({ limit, page, usersName, departmentId })
        .then((res) => {
          if (res == 503) {
            this.$router.push('/403')
          }
          this.total = res.count;
          this.tableUsers = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 确认添加/修改用户
    listadd(list) {
      console.log(list);
      if (this.$refs.dialogform.bg == 0) {
        addUsers({
          departmentId: list.department, // 用户部门
          online_flag: list.online_flag, // 是否启用
          usersAccount: list.usersAccount, //账号/用户名
          usersJob: list.usersJob, //用户职务/角色
          usersName: list.usersName, //用户姓名
          usersPassword: list.usersPassword, // 用户密码
          usersRole: list.usersRole, //用户权限
        }).then((res) => {
          console.log(res);
          if (res.result_code == 200) {
            this.$message.success("添加成功!");
            this.querUser();
            this.$refs.dialogform.formdata = {};
          }
        });
      } else {
        updateUsers({
          departmentId: list.department, // 用户部门
          online_flag: list.online_flag, // 是否启用
          usersAccount: list.usersAccount, //账号/用户名
          usersJob: list.usersJob, //用户职务/角色
          usersName: list.usersName, //用户姓名
          usersId: list.usersId, // 用户密码
          usersRole: list.usersRole, //用户权限
        }).then((res) => {
          if (res.result_code == 200) {
            this.$message.success("修改成功!");
            this.querUser();
            this.$refs.dialogform.formdata = {};
          }
        });
      }
    },
    // 新增用户
    showdiaform() {
      if (this.$refs.dialogform.bg == 1) {
        this.$refs.dialogform.bg = 0;
        this.$refs.dialogform.formdata = {};
        this.$refs.dialogform.dialogFormVisible = true;
      } else {
        this.$refs.dialogform.dialogFormVisible = true;
      }
    },
    // 修改/编辑 用户信息
    compileClick(data) {
      console.log(data);
      this.$refs.dialogform.bg = 1;
      this.$refs.dialogform.formdata = data;
      this.$refs.dialogform.dialogFormVisible = true;
    },
    // 修改密码
    changePassword(data) {
      console.log(data);
      this.$refs.dialogform.bg = 2;
      this.$refs.dialogform.formdata= data;
      this.$refs.dialogform.dialogFormVisible2 = true;
    },
    // 页码切换
    curpage(val) {
      this.page = val;
      this.querUser();
    },

    // 删除用户
    deleteClick(eee) {
      console.log(eee);
         this.$confirm('此操作将永久删除改用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleteUser({usersId:eee.usersId}).then(res=>{
              console.log(res);
              if (res.result_code == 200) {
                this.$message.success('删除成功!');
                this.querUser();
              }
            })
         }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     
    },
  },
};
</script>

<style lang="scss" scoped>
h1 {
  text-align: left;
  line-height: 45px;
  border-bottom: 2px solid #006560;
  margin-bottom: 15px;
}
.xzlist {
  margin-bottom: 10px;
  text-align: left;
  label {
    text-align: left;
    padding-right: 5px;
  }
  .el-input{width:80px;margin-right:10px;}

  .el-select{width:150px}
  button {
    background: #006560;
    border: #006560;
    color: white;
    border-radius: 5px;
    padding: 0 10px;
    margin-right: 15px;
    height: 35px;
    line-height: 35px;
  }
}
.el-dialog > .el-dialog__header {
  background: #006560;
  text-align: left;
}

.el-dialog__body {
  padding-bottom: 0;
}
</style>
